<script setup lang="ts">
import {
  getPermissionList,
  updatePermissionStatus
} from "@/api/modules/system";
import { DEFAULT_PAGINATION } from "@/common/init";
import { message } from "@/utils/message";
import { cloneDeep, debounce } from "@pureadmin/utils";
import { PlusSearch } from "plus-pro-components";
import { onMounted, reactive, ref } from "vue";
import { fromColumns, tableColumns } from "./data";
import EditFrom from "./modules/edit-from.vue";

defineOptions({
  name: "system-permission"
});

const tableData = ref([] as any[]);
const pagination = reactive({
  ...DEFAULT_PAGINATION
});
const fromState = ref({
  name: "",
  code: "",
  status: "",
  type: ""
});
const defaultFromState = cloneDeep(fromState.value);
const editVisible = ref(false);
const currentRow = ref(null);

function fetchTableData(param?: any) {
  getPermissionList(param ? param : null).then(res => {
    tableData.value = res.data.records;
    pagination.total = res.data.total;
  });
}

function handleReset() {
  fromState.value = defaultFromState;
  fetchTableData({
    pageSize: pagination.defaultPageSize,
    current: pagination.defaultCurrentPage
  });
}

function handleSizeChange(size: number) {
  pagination.pageSize = size;
  fetchTableData({
    pageSize: size,
    current: pagination.currentPage,
    ...fromState.value
  });
}

function handleCurrentChange(page: number) {
  pagination.currentPage = page;
  fetchTableData({
    pageSize: pagination.pageSize,
    current: page,
    ...fromState.value
  });
}

function handleSearch() {
  fetchTableData({
    pageSize: pagination.pageSize,
    current: pagination.currentPage,
    ...fromState.value
  });
}
const handleFromChange = debounce(handleSearch, 500);

function handleStatusChange(id: string, status: any) {
  updatePermissionStatus({ permissionId: id, status: status }).then(() => {
    message("权限状态更新成功", { type: "success" });
    handleSearch();
  });
}

function handleEdit(row: any) {
  currentRow.value = row;
  editVisible.value = true;
}

onMounted(() => {
  handleReset();
});
</script>

<template>
  <div id="table-container">
    <el-card shadow="never" class="mb-5">
      <PlusSearch
        v-model="fromState"
        :columns="fromColumns"
        :show-number="2"
        label-width="100"
        label-position="right"
        @search="handleSearch"
        @reset="handleReset"
        @change="handleFromChange"
      />
    </el-card>

    <el-card shadow="never">
      <template #header>
        <div class="w-full flex justify-between">
          <span>权限列表</span>
        </div>
      </template>
      <pure-table
        row-key="id"
        show-overflow-tooltip
        adaptive
        align-whole="center"
        table-layout="auto"
        :columns="tableColumns"
        :data="tableData"
        :pagination="pagination"
        @page-current-change="handleCurrentChange"
        @page-size-change="handleSizeChange"
      >
        <template #type="{ row }">
          <el-tag v-if="row.type === 1" type="success" effect="plain">
            目录
          </el-tag>
          <el-tag v-else type="primary" effect="plain">接口权限</el-tag>
        </template>
        <template #status="{ row }">
          <el-switch
            :model-value="row.status"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            active-text="开启鉴权"
            inactive-text="暂停鉴权"
            @change="val => handleStatusChange(row.id, val)"
          />
        </template>
        <template #operation="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">
            编辑
          </el-button>
        </template>
      </pure-table>
    </el-card>
    <EditFrom
      v-model:visible="editVisible"
      :row="currentRow"
      @refresh="handleSearch"
    />
  </div>
</template>
